<template>
  <div>
    <vxe-modal
      :title="$t('common.title.setting', '设置')"
      v-model="show"
      :loading="loading"
      :mask="false"
      :lock-view="false"
      width="60vw"
      height="480px"
      destroy-on-close
      show-zoom
      remember
      resize
      show-footer
      show-confirm-button
      show-cancel-button
      @confirm="confirmHandle"
    >
      <el-form ref="refForm" :model="formData" label-width="120px">
        <el-form-item-plus
          :label="$t('menu.admin.lang.field.lang_key', '语言键')"
          prop="key"
        >
          <div class="flex w-[100%]">
            <el-input
              v-model="formData.key"
              :placeholder="$p('menu.admin.lang.field.lang_key', '语言键')"
            />
            <el-button
              type="success"
              class="ml-2"
              @click="getTransData(formData.key)"
            >
              {{ $t('common.action.load', '载入') }}
            </el-button>
          </div>
        </el-form-item-plus>
        <ra-multi-language
          v-model="formData.translations"
          :languages="languageList"
          :required="false"
          :prop-prefix="'formData'"
        />
      </el-form>
    </vxe-modal>
  </div>
</template>

<script setup>
// 设置选项式 API 的内容
defineOptions({
  // 组件名称
  name: 'SettingModal',
  // 阻止透传非 props 属性
  inheritAttrs: false,
});

import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';
import I18nAPI from '@/api/admin/admin/i18n';

const props = defineProps({
  api: {
    type: Object,
    required: true,
    validator: (value) => {
      return (
        typeof value.update === 'function' &&
        typeof value.getFormData === 'function'
      );
    },
  },
  options: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['reload']);

// 是否显示载入效果
const loading = ref(false);
// 是否显示
const show = ref(false);
// 语言列表
const languageList = ref([]);
// 表单数据
const formData = ref({
  key: '',
  translations: [],
});

// 初始化表单数据
const initFormData = () => {
  Object.assign(formData.value, {
    key: null,
    translations: [],
  });
};

const getTransData = async (key) => {
  if (key) {
    const { data } = await props.api.getTransData({ key });
    formData.value.key = key;
    formData.value.translations = data;
  } else {
    ElMessage.error($p('menu.admin.lang.field.lang_key', '语言键'));
  }
};

const confirmHandle = async () => {
  await props.api.setting(formData.value);
  emit('reload');
};

/**
 * 暴露方法
 */
defineExpose({
  show(key = null) {
    I18nAPI.getLangList().then(({ data }) => {
      languageList.value = data.languages;
    });
    // 先显示模态框
    show.value = true;
    // 初始化数据
    initFormData();
    // 加载详情数据
    if (key) {
      getTransData(key);
    }
  },
});
</script>

<style lang="scss" scoped>
.desc-label-width {
  width: 100px;
}

.content-text {
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

// 加载状态样式
:deep(.el-loading-mask) {
  border-radius: 4px;
}
</style>
